<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头部 -->
        <TitleSearch :show-before="true">
          <template #before>
            <el-button type="primary" @click="addFn">添加页面</el-button>
          </template>
          <template #after>
            <el-row style="flex:1" type="flex" justify="end">
              <el-input v-model.trim="content" style="width:550px" placeholder="请输入关键字" />
              <el-button @click="screenFn">筛选</el-button>
            </el-row>
          </template>
        </TitleSearch>
        <!-- 主体 -->
        <el-table
          :data="tableData"
          height="500px"
          border
          style="width: 100%"
        >
          <el-table-column prop="title" label="标题" width="180" />
          <!-- 作用域插槽解析标签 -->
          <el-table-column v-slot="{row}" prop="content" label="内容">
            <div v-html="row.content" />
          </el-table-column>
          <el-table-column v-slot="{row}" prop="address" label="操作" width="280">
            <el-button type="primary" @click="editFn(row.id)">编辑</el-button>
            <el-button @click="delFn(row.id)">删除</el-button>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination slayout=" total, sizes, prev, pager, next, jumper ,slot" align="center" :current-page="page" :page-sizes="[5, 10, 15, 20]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        <!--  新增/编辑弹窗组件 -->
        <AddPages ref="AddPages" :dialog-show.sync="DialogShow" @updateEvnet="getPagesList" />
      </el-card>
    </div>
  </div>
</template>

<script>
// 页面接口
import {
  getPagesList,
  delPagesList,
  setPagesId,
  amountPagesList
} from '@/api/page'
// 新增/编辑弹窗组件
import AddPages from './components/AddPages.vue'
export default {
  components: { AddPages },
  data() {
    return {
      tableData: [], // 页面列表
      DialogShow: false, // 弹窗组件
      content: '', // 搜索
      limit: 10, // 获取数据条数
      start: 0, // 开始获取的位置
      page: 1, // 页数
      total: 0,
      title_contains: ''

    }
  },
  created() {
    // 获取页面
    this.getPagesList()
  },
  methods: {
    // 搜索
    async screenFn() {
      // 点击之后,获取第一页数据
      this.page = 1
      // 把输入框的值赋值给 title_contains
      this.title_contains = this.content
      this.getPagesList()
    },
    // 编辑
    async editFn(id) {
      this.addFn()
      // 回显
      this.$refs.AddPages.formData = await setPagesId(id)
    },
    // 删除
    async delFn(id) {
      await this.$confirm('是否要删除该页面?', '删除', {
        cancelButtonText: '取消',
        confirmButtonText: '确定'
      }).then(async() => {
        // 调用接口
        await delPagesList(id)
        this.$message.success('删除成功!')
        console.log(107, this.page)
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        // 更新页面
        this.getPagesList()
      }).catch(() => {
        console.log('取消了')
        this.$message.info('取消删除')
      })
    },
    // 控制弹窗
    addFn() {
      this.DialogShow = true
    },
    // 获取条数
    handleSizeChange(size) {
      this.limit = size
      this.getPagesList()
    },
    // 数据从那个位置开始获取
    handleCurrentChange(page) {
      this.page = page
      // 数据从0开始获取,每次10条,所以点击的减一,在乘当前条数
      this.start = (page - 1) * this.limit
      this.getPagesList()
    },
    // 获取页面列表
    async getPagesList() {
      const res = await getPagesList({
        _limit: this.limit,
        _start: (this.page - 1) * this.limit,
        title_contains: this.title_contains
      })
      this.tableData = res
      // console.log(75, res)
      this.amountPagesList()
    },
    // 数据总数量
    async amountPagesList() {
      const res = await amountPagesList({
        title_contains: this.title_contains
      })
      this.total = res
    }
  }
}
</script>

<style lang='scss' >
</style>>

